<template>
	<view class="dub">
		<view class="dub-top" style="background-color:rgb(217, 217, 217)">
			<view class="gold" v-for="(item, index) in vipList" :key="index"
				:style="active1==index?'background-color:#fff;':'background-color:#d9d9d9;'"
				@click="handleGold(item, index)">
				<view
					style="display: flex;align-items: center;position: absolute;left: 50%;transform: translateX(-50%);">
					<image class="gold-img" :src="localIconSrc(item.name)"></image>
					<view class="gold-text" :style="{color: active1 == index ? '#eabe87' : '#999'}">{{ item.text }}
					</view>
				</view>
			</view>
		</view>
		<view class="list-back" v-show="isMember == 0">
			<view class="list-vip" v-if="goldList">
				<view
				  class="list-item"
					v-for="(item, index) in moneylist"
					:key="index"
					@click="handleItem(item, index)"
					:class="active == index ? 'active' : ''"
				>
					<view class="vip-item">
						<view class="month">
							<view v-if="item.expiration == 0">未知</view>
							<view v-if="item.expiration == 1">1天</view>
							<view v-if="item.expiration == 2">3天</view>
							<view v-if="item.expiration == 3">7天</view>
							<view v-if="item.expiration == 4">15天</view>
							<view v-if="item.expiration == 5">1个月</view>
							<view v-if="item.expiration == 6">3个月</view>
							<view v-if="item.expiration == 7">6个月</view>
							<view v-if="item.expiration == 8">12个月</view>
							<view v-if="item.expiration == 9">36个月</view>
							<view v-if="item.expiration == 99">无限</view>
							<!-- <text class="mon-number">
							  {{ item.h_month_zi }}
							</text>
							<text>字/月</text> -->
						</view>
						<!-- <view class="month" v-if="active == 1">
							<text class="mon-number">{{ item.day_zi }}</text>
							<text>/日</text>
						</view> -->
						<view class="money-item">
							<text class="unit">￥</text>
							<text class="money">{{ item.price }}</text>
						</view>
						<view class="price">{{ item.original_price }}</view>
					</view>
				</view>
			</view>

			<view class="list-vip" v-if="!goldList">
				<view
					class="list-item"
					v-for="(item, index) in commmonList"
					:key="index"
					@click="handleItem(item, index)"
					:class="active == index ? 'active' : ''"
				>
					<view class="vip-item" @click="handleItem(item, index)">
						<view class="month">
							<!-- <text class="mon-number">
								{{ item.h_month_zi }}
							</text>
							<text>字/月</text> -->
							<view v-if="item.expiration == 0">未知</view>
							<view v-if="item.expiration == 1">1天</view>
							<view v-if="item.expiration == 2">3天</view>
							<view v-if="item.expiration == 3">7天</view>
							<view v-if="item.expiration == 4">15天</view>
							<view v-if="item.expiration == 5">1个月</view>
							<view v-if="item.expiration == 6">3个月</view>
							<view v-if="item.expiration == 7">6个月</view>
							<view v-if="item.expiration == 8">12个月</view>
							<view v-if="item.expiration == 9">36个月</view>
							<view v-if="item.expiration == 99">无限</view>
						</view>
						<!-- <view class="month">
							<text class="mon-number">
								{{ item.day_zi > 10000 ? (item.day_zi / 10000) + '万' : item.day_zi }}
							</text>
							<text>/日</text>
						</view> -->
						<view class="money-item">
							<text class="unit">￥</text>
							<text class="money">{{ item.price }}</text>
						</view>
						<view class="price">{{ item.original_price }}</view>
					</view>
				</view>
			</view>
			
			<view class="btn">
				<view class="vip-btn"  @tap="$u.throttle(cashRecharge, 3000)">立即开通VIP尊享会员</view>
				<!-- <checkbox class="round red">同意《用户协议》和《隐私政策》</checkbox> -->
				<view style="margin-top:40rpx;display: flex;justify-content: center;align-items: center;line-height: 20rpx;">
					<checkbox-group  @change="handleChange">
						<checkbox class="round red" :checked="checked" style="transform:scale(1.3)">
						</checkbox>
					</checkbox-group>
					<view style="margin-left: 10rpx;" @click="handleChange">
						同意
						<text style="color: #47ACF5;" @click.stop="toPrivacy">《用户协议》</text>
						和
						<text style="color: #47ACF5;" @click.stop="toPrivacy">《隐私政策》</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 会员样式 -->
	  <view class="huiyuan" v-show="isMember == 1">
			<view class="top-hui">
				<image style="width: 100rpx;height: 100rpx;border-radius: 50%;" class="img" :src="portrait !='' ? portrait : localIconSrc('moren.png')"></image>
				<view class="hui-text">
					<view class="text">{{ username || '微信用户' }}</view>
					<view class="time">{{ dubExpTime }}到期</view>
				</view>
			</view>
			<view class="bottom-hui">
				<view class="zinum">可用字数</view>
				<view class="zinum">
					<text class="mon"><text class="num">{{ monthNum }}</text>字/月</text>
					<text class="mon"><text class="num">{{ dayNum }}</text>字/日</text>
				</view>
			</view>
		</view>
		
		
		
		<view class="compare">
			<view class="com-text">会员特权对比</view>
			<view class="com-img">
				<image style="width: 100%;" mode="widthFix" :src="localIconSrc('gold.png')"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCreateOrder,
		getWechatKey,
		getConfigList,
		getRefreshUser,
		payMoney
	} from '@/api/wallet.js'
	import { getUserInfo } from '@/api/login.js'
	export default {
		// props: {
		// 	moneylist: {
		// 		type: Array
		// 	}
		// },
		data() {
			return {
				vipList: [{
						text: '黄金VIP',
						name: 'huanjin.png'
					},
					{
						text: '铂金VIP',
						name: 'bojin.png'
					},
				],
				active: 0,
				configId: '',
				active1: 0,
				moneylist: [],
				goldList: true, // 黄金vip
				commmonList: [],
				checked: false,
				isMember: 0 ,// 是否已经是会员
				monthNum: 0,
				dayNum: 0,
				dubExpTime: '',
				portrait: '', // 头像地址
				username: ''
			}
		},
		onLoad() {
			console.log('hhhfhdjfhdfd')
			// this.getList()
		},
		onReady() {
			console.log('hhhfhdjfhdfd')
			this.getList()
			this.getUserMessage()
			this.getUser()
			
		},
		methods: {
			getUser() {
				const accessToken = uni.getStorageSync('acctoken')
				const openid = uni.getStorageSync('openid')
				let useStr = {
					"access_token": accessToken,
					"appid": '073820240321128890',
					"openid": openid
				}
				console.log('useStr', useStr)
				getUserInfo(useStr).then(res => {
					console.log('res', res)
					const { amount, nickname, mobile, portrait } = res
					this.username = nickname
					this.portrait = portrait
				})
			},
			
			getUserMessage() {
				getRefreshUser().then(user => {
					console.log('user', user)
					const { is_dub_member, h_dub_day_zi, h_dub_month_zi, dub_exp_time } = user.data
					this.isMember = is_dub_member
					this.monthNum = h_dub_month_zi
					this.dayNum = h_dub_day_zi
					this.dubExpTime = dub_exp_time
				})
			},
			getList() {
				this.moneylist = []
				this.commmonList = []
				let data = {
					type: 1
				}
				getConfigList(data).then(res => {
					console.log('配音套餐', res)
					const {
						data
					} = res.data
					data.forEach((ele,index) => {
						if (ele.level == 1 && this.goldList) {
							if(index==0){
								this.configId = ele.id
							}
							this.moneylist.push(ele)
							this.commmonList = []
						} else if (ele.level == 2 && !this.goldList) {
							this.commmonList.push(ele)
							this.moneylist = []
						}
					})
				})
				console.log('配音套餐1', this.commmonList, this.moneylist)
			},
			cashRecharge() {
				if(!this.checked) {
					uni.showToast({
						title: '请先阅读并勾选用户协议',
						icon: 'none'
					});
					return
				}
				uni.showLoading({
					title:'请稍后...'
				})
				let param = {
					appid: '073820240321128890',
					package_config_id: this.configId,
					request_from_url: 'pages/memberCenter/index'
				}
				
				uni.getSystemInfoAsync({
					success: (res) => {
						console.log('res', res)
						if(res.system.includes('iOS')) {
							uni.showModal({
								// title: "提示",
								content: "由于相关规范，iOS功能暂不可用",
								confirmText: '知道了',
								showCancel: false,
								success: (res)=> {
									if (res.confirm) {
										return
									}
								},
							})
							uni.hideLoading()
							return
							
						} else {
							getCreateOrder(param).then(res => {
								console.log('res2', res);
								const {
									out_trade_no,
									jky_trade_no
								} = res.data
								let data = {
									appid: '073820240321128890',
									wx_id: 'gh_85adb5b7352f',
									out_trade_no: out_trade_no
								}
								payMoney(data)
							})
						}
					},
				})
			},
			handleItem(item, index) {
				console.log(item, 'hhhh')
				this.configId = item.id
				this.active = index
			},
			handleGold(item, index) {
				this.active1 = index;
				this.active = 0
				this.goldList = !this.goldList
				this.getList()
			},
			// 点击同意用户协议
			handleChange(e) {
				console.log('this.checke', this.checked, e)
				this.checked = !this.checked
			},
			// 隐私政策
			toPrivacy() {
				uni.navigateTo({
					url: '/pages/privacyPage/privacyPage'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dub {

		.dub-top {
			// background: #999;
			border-radius: 20rpx;
			display: flex;
			margin-top: -70rpx;

			.gold {
				display: flex;
				align-items: center;
				border-radius: 20rpx 20rpx 0 0;
				height: 100rpx;
				width: 50%;
				line-height: 100rpx;
				text-align: center;
				position: relative;
				.gold-text {
					margin-left: 20rpx;
					font-size: #{$one-title-size};
					font-weight: bold;
				}

				.gold-img {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.list-back {
			background: #fff;
			padding-bottom: 20rpx;

		}

		.list-vip {
			display: flex;
			overflow-x: scroll;
			margin: 0 20rpx;
			min-height: 226rpx;
			.list-item {
				padding: 20rpx 40rpx;
				text-align: center;
				border: 1px solid #f5f5f5;
				border-radius: 16rpx;
				margin-right: 20rpx;
				margin-top: 20rpx;
				width: 100%;
			}

			.active {
				background: #fff0e7;
				border: 1px solid #eabe87;
				border-radius: 16rpx;
				margin-top: 20rpx;
				// margin-left: 20rpx;
			}

			.vip-item {
				// margin-top: 40rpx;
				// text-align: center;
				// border: 1px solid #f5f5f5;
				// width: 140rpx;
				// border-radius: 16rpx;
				// margin-right: 20rpx;
				// padding: 10rpx 30rpx;

				.mon {
					// margin-top: 20rpx;
					font-size: #{$one-title-size};
					color: #{$one-title-color};
				}

				.month {
					// margin-top: 20rpx;
					font-size: #{$text-size};
					color: #{$one-title-color};
					white-space: nowrap;

					.mon-number {
						color: #eabe87;
						;
					}
				}

				.money-item {
					color: #eabe87;
					margin-top: 20rpx;

					.unit {
						font-size: #{$explain-size};
					}

					.money {
						font-size: 52rpx;
					}
				}

				.price {
					font-size: #{$text-size};
					color: #{$sub-color};
					text-decoration: line-through;
				}
			}
		}

		.btn {
			text-align: center;
			padding-bottom: 40rpx;

			.vip-btn {
				height: 80rpx;
				line-height: 80rpx;
				color: #9b5f16;
				font-size: #{$one-title-size};
				background-image: linear-gradient(to right, #ffc069 0%, #feebc0 100%);
				border-radius: 50rpx;
				margin: 60rpx 20rpx 20rpx 20rpx;
			}

			.round {
				font-size: #{$auxiliary-size};
				color: #{$sub-color};
			}
		}

		.compare {
			margin: 20rpx;
			height: calc(100vh - (var(--status-bar-height) + 44px + 700rpx));
			overflow-y: scroll;
			.com-img {
				width: 100%;
				margin: auto;
			}
		}
	}
	
	
	.huiyuan {
		background: linear-gradient(to right,#777 0%, #252525 100%);
		color: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		margin: 30rpx;
		
		.top-hui {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			.hui-text {
				margin-left: 40rpx;
				.text {
					font-size: 36rpx;
					margin-bottom: 10rpx;
				}
				.time {
					font-size: 28rpx;
				}
			}
		}
		.bottom-hui {
			font-size: 28rpx;
			.mon {
				margin-right: 30rpx;
			}
			.num {
				color: #ff6005;
			}
		}
	}
</style>